<script setup lang="ts">
import { ref } from 'vue'

const fn = () => console.log(111)
const type = ref<'primary' | 'danger' | 'default'>('primary')
</script>

<template>
  <!-- 
    布置任务: 
    1. 挑一个vant组件 封装出来(样式不做要求 只要有大概的要求) 
        <cp-button type="primary蓝/danger红" size="big大/normal正常" @click='fn'>按钮</cp-button>
        1.1 优化type类型 联合字面量类型处理
        1.2 优化size类型 联合字面量类型处理
        1.3 插槽提供默认值
        1.4 传入的数据不需要另做变量存储, 直接使用(bug)

    2. 首页模块结束后 后面的业务复杂了 => 数据极其复杂 => 类型恶心
        
          
    
   -->
  <div @click="type = 'default'">home</div>

  <cp-button :type="type" size="big" @click="fn"></cp-button>
</template>
